<template>
    <div class="common-layout">
      <el-container>
        <el-header style=" width: 390px;height: 100px;;display: flex;flex-direction: row;">
          <div style="height: 50px;margin-top: 30px;margin-left: -20px;">
              <el-icon style="font-size: 30px; width: 30px;height: 50px;"><ArrowLeftBold @click = "return1" /></el-icon>
          </div>
          <div style="height: 45px;margin-top: 30px;">
              <img style="width: 45px;height: 45px;" src="./图片/屏幕截图 2024-06-19 142919.png">
          </div>
          <div style=" margin-top:27px;margin-left: 10px;width: 170px;">
              <p style="width: 170px;">{{b.user.nickname}}</p>
          </div>
          <div style=" margin-top: 35px;height: 40px;width: 70px;margin-left: 15px;">
              <el-button style="width: 70px;height: 40px;" type="primary" round plain>关注</el-button>
          </div>
          <div style="height: 50px;width: 40px;margin-top: 38px;margin-left: 10px;">
              <el-icon style="font-size: 35px;" @click = "bulletBox"><Edit /></el-icon>
              <el-dialog v-model="dialogVisible" title="编辑提示" width="300" height="200" align-center>
                  <div style="display: flex;flex-direction: row;">
                      <div @click="delete1" style="margin-left: 35px;"><p style="font-size: 17px;color:#409EFF;">删除改文章</p></div>
                      <div  @click="edit(router.currentRoute.value.query.myid)" style="margin-left: 45px;"><p style="font-size: 17px;color:#409EFF;">编辑改文章</p></div>
                  </div>
              </el-dialog>
          </div>
        </el-header>
        <el-main style="margin: 0%;padding: 0px;">
              <el-image style="width: 390px;height: 400px;" :src="b.imgUrls"/>
          <div style="width: 390px;">
              <p style="font-family: 宋体;font-size: 20px;">{{b.title}}</p>
              <p style="font-family: 楷体;font-size: 20px;">内容：{{b.content}}</p>
          </div>
        </el-main>
      </el-container>
    </div>
    
    <RouterView />
  </template>
  
  <style scoped>
  
  </style>
  
  <script setup>
  import {ArrowLeftBold,Edit} from "@element-plus/icons-vue"
  import { ref,onMounted} from 'vue';
  
  const b = ref({
     user:[],
     title:"",
     imgUrls:""
  })
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const query1 = ()=>{
      fetch(`http://localhost:3000/articles/${router.currentRoute.value.query.myid}?_embed=user`,{
          method:'get'
      }).then(response=>response.json()).then((data1)=>{
          b.value = data1
      })
  }
  
  onMounted(()=>{
      query1()
      query2()
      query3()
  })
  // 返回
  const router1 = useRouter();
  const return1 = () => {
    // 如果是内部路由跳转 (Vue Router)
    router1.push({path:'/jiazhuang'})
  
  };
   
  
  const dialogVisible = ref(false)
  const bulletBox = ()=>{
      dialogVisible.value = true
  }
    // 删除
const router2 = useRouter();
const return2 = () => {
  // 如果是内部路由跳转 (Vue Router)
  router2.push({path:'/jiazhuang'})

};
const delete1 =(id)=>{
    fetch("http://localhost:3000/articles/"+router.currentRoute.value.query.myid,{
        method:"delete"
    }).then(response=>response.json()).then((data)=>{
                return2()
            
    })
}

// 编辑
const router3 = useRouter();
const edit = (id)=>{
    router3.push({path:'/jiazhuangBianji',query:{myid:id}})
}

// 编辑完回来
const router4 = useRouter();
const query2 = ()=>{
    fetch(`http://localhost:3000/articles/${router4.currentRoute.value.query.myid}?_embed=user`,{
        method:'get'
    }).then(response=>response.json()).then((data1)=>{
        b.value = data1
    })
} 

// 点进去未编辑回来
const router11 = useRouter();
const  query3=()=>{
    fetch(`http://localhost:3000/articles/${router11.currentRoute.value.query.myid}?_embed=user`,{
        method:'get'
    }).then(response=>response.json()).then((data1)=>{
        b.value = data1
    })
} 
  
  </script>